<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>模仿腾讯官网首页视频播放</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
				font: 12px/1.5 tahoma, 'PingFang SC', 'microsoft yahei', arial, 'helvetica neue', 'hiragino sans gb', sans-serif
			}
			.fl {
				float: left;
			}
			.box {
				position: absolute;
			}
			.box video {
				width: 100%;
				vertical-align: middle;
				z-index: 0;
			}
			.logo {
				position: absolute;
				top: -60px;
				left: 60px;
			}
			.logo img {
				width: 200px;
				height:200px;
			}
			.conter{
				position: absolute;
				top:210px;
				left: 510px;
				width: 700px;
				z-index: 2;
			}
			.title{
				color: white;
				font-size: 60px;
				line-height: 80px;
				font-weight: 400;
			}
			.circle{
				width: 35px;
				height:35px;
				border-radius: 50%;
				border:4px solid white;
				display: block;
				line-height: 80px;
				background-color:rgba(255,255,255,.3) ;
				position: absolute;
				top: 20px;
				left: 274px;
			}
			.triangle{
				width: 0px;
				height: 0px;
				border-width: 12px 0px 12px 15px;
				border-style: solid;
				border-radius: 5px;
				border-color: transparent  transparent transparent white; 
				position: absolute;
				top: 29px;
				left: 290px;
			}
			.conter p{
				font-size: 80px;
				font-style:italic ;
				color: white;
				font-weight: bold;
				position: absolute;
				top: 70px;
				left: -200px;
			}
			.nav{
				position:absolute;
				top:30px;
				left:680px;
				z-index: 3;
			}
			.nav li span,.nav1 li span{
				color: white;
				font-size: 12px;
				opacity: .5;
				padding-left: 15px;
			}
			.box  li{
				list-style: none;
				display: inline;
				word-spacing: 20px;
			}
			.nav li a{
				color: white;
				font-size: 16px;
				text-decoration: none;
			}
			.nav li a:hover{
			text-decoration:overline;
			margin-bottom: 20px;
			}
			.nav1{
				position: absolute;
				top:32px;
				left: 1140px;
				z-index: 4;
			}
			.nav1 li a{
				color: white;
				font-size: 14px;
				text-decoration: none;
				margin-right: -10px;
			}
			.mask{
				height: 760px ;
				width: 100%;
				background:linear-gradient(to top,rgba(246,185,204,.3),rgba(179,135,218,.3));
				vertical-align: middle;
				position:absolute;
				top: 0px;
				left: 0px;
				z-index:1;
			}
		</style>
	</head>

	<body>
		<div class="box fl">
			<video src="video1.mp4" autoplay loop  /></video>
			<div class="logo">
				<img src="image/logo1.png" />
			</div>
			<div class="conter">
				<span class="title">TENCENT</span>
				<span class="circle"></span>
				<span class="triangle"></span>
				<p>青春无畏&nbsp;&nbsp;&nbsp;冲动不止</p>
			</div>
			<ul class="nav">
				<li>
					<a href="square.html">公司信息</a><span>|</span>
				</li>
				<li>
					<a href="#">企业文化</a><span>|</span>
				</li>
				<li>
					<a href="#">业务体系</a><span>|</span>
				</li>
				<li>
					<a href="#">投资者关系</a><span>|</span>
				</li>
			</ul>
			<ul class="nav1">
				<li>
					<a href="#">简</a><span>|</span>
				</li>
				<li>
					<a href="#" style="opacity: .5;">繁</a><span>|</span>
				</li>
				<li>
					<a href="#" style="opacity: .5;">EN</a>
				</li>
			</ul>
			<div class="mask"></div>
		</div>
	</body>
</html>